<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>支付订单管理</title>
    <style type="text/css">
        .shipping-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .shipping-modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            position: relative; /* 添加相对定位 */
        }

        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            position: absolute; /* 使用绝对定位 */
            top: 10px; /* 距离顶部10px */
            right: 10px; /* 距离右侧10px */
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
        }

        .modal-title {
            margin-top: 20px; /* 增加顶部间距 */
            margin-bottom: 20px;
            font-size: 18px;
            color: #333;
            font-weight: 600;
        }

        .q-select,
        .q-input {
            width: 100%;
        }

        .q-btn.full-width {
            width: 100%;
            margin-top: 20px;
        }




        .copy-btn {
            padding-left: 4px;
            cursor: pointer;
        }

        .viewer-container {
            z-index: 9999 !important;
        }

        .logistics-modal, .shipping-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        .logistics-modal-content, .shipping-modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.7.8/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/viewerjs@1.3.3/dist/viewer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/viewerjs@1.3.3/dist/viewer.min.js"></script>
<div th:replace="common/header::html"></div>
<div id="q-app">
    <div class="q-pa-md">
        <q-table color="primary" :data="tableData" :columns="tableColumns" :pagination.sync="tablePagination"
                 :rows-per-page-options="[10, 30, 50, 100]" :loading="tableDataLoading" @request="loadTableData">
            <template v-slot:top-left>
                <div class="q-gutter-md row query-cond">
                    <q-input outlined v-model="memberMobile" label="会员手机号" :dense="true"></q-input>
                    <q-input outlined v-model="collectionName" label="艺术品名称" :dense="true"></q-input>
                    <q-select clearable outlined v-model="bizMode" emit-value map-options :options="bizModeDictItems"
                              option-value="dictItemCode" option-label="dictItemName" label="业务模式"
                              :dense="true"></q-select>
                    <q-select clearable outlined v-model="state" emit-value map-options :options="stateDictItems"
                              option-value="dictItemCode" option-label="dictItemName" label="状态"
                              :dense="true"></q-select>
                    <q-input outlined v-model="timeStart" label="创建时间上" :dense="true">
                        <template v-slot:append>
                            <q-icon name="event" class="cursor-pointer">
                                <q-popup-proxy ref="qdate1"
                                               transition-show="scale" transition-hide="scale">
                                    <q-date v-model="timeStart" mask="YYYY-MM-DD" @input="$refs.qdate1.hide()"></q-date>
                                </q-popup-proxy>
                            </q-icon>
                        </template>
                    </q-input>
                    <q-input outlined v-model="timeEnd" label="创建时间下" :dense="true">
                        <template v-slot:append>
                            <q-icon name="event" class="cursor-pointer">
                                <q-popup-proxy ref="qdate2"
                                               transition-show="scale" transition-hide="scale">
                                    <q-date v-model="timeEnd" mask="YYYY-MM-DD" @input="$refs.qdate2.hide()"></q-date>
                                </q-popup-proxy>
                            </q-icon>
                        </template>
                    </q-input>
                    <q-btn color="primary" label="查询" icon="search" @click="refreshTable"></q-btn>
                </div>
            </template>
            <template v-slot:top-right>
                <div class="q-gutter-md row"></div>
            </template>
            <template v-slot:body-cell-member_info="props">
                <q-td :props="props">
                    <div>
                        <div>手机号: {{ props.row.memberMobile }}</div>
                        <!-- <div>区块链地址: {{ props.row.memberBlockChainAddr }}</div> -->
                    </div>
                </q-td>
            </template>
            <template v-slot:body-cell-collection_info="props">
                <q-td :props="props">
                    <div style="display: flex; align-items: center;">
                        <div>
                            <img :src="props.row.collectionCover"
                                 style="height: 40px; width: 40px; object-fit: contain;">
                        </div>
                        <div style="padding-left: 4px;">
                            <div>{{ props.row.collectionName }}</div>
                            <div>{{ props.row.commodityTypeName }}</div>
                        </div>
                    </div>
                </q-td>
            </template>
            <template v-slot:body-cell-pay_biz="props">
                <q-td :props="props">
                    <div>
                        <div>业务模式: {{ props.row.bizModeName }}</div>
                        <div v-show="props.row.bizOrderNo">业务订单号: {{ props.row.bizOrderNo }}</div>
                    </div>
                </q-td>
            </template>
            <template v-slot:body-cell-stateName="props">
                <q-td :props="props">
                    <div>{{ props.row.stateName }}</div>
                </q-td>
            </template>
            <template v-slot:body-cell-amount="props">
                <q-td :props="props">
                    <div>金额: {{ props.row.amount }}</div>
                </q-td>
            </template>
            <template v-slot:body-cell-cashbackAmount="props">
                <q-td :props="props">
                    <div>返现金额: {{ props.row.cashbackAmount }}</div>
                </q-td>
            </template>
            <template v-slot:body-cell-cashbackStatus="props">
                <q-td :props="props">
                    <div v-if="props.row.cashbackStatus === 0">未返现</div>
                    <div v-else-if="props.row.cashbackStatus === 1">已返现</div>
                </q-td>
            </template>
            <template v-slot:body-cell-deliveryStatus="props">
                <q-td :props="props">
                    <div v-if="props.row.deliveryStatus === 0">未发货</div>
                    <div v-else-if="props.row.deliveryStatus === 1">已发货</div>
                </q-td>
            </template>
            <template v-slot:body-cell-expressNumber="props">
                <q-td :props="props">
                    <div @click="getExpressDetails(props.row.expressNumber)" style="cursor: pointer; color: blue;">
                        {{ props.row.expressNumber }}
                    </div>
                </q-td>
            </template>
            <template v-slot:body-cell-logisticsCompany="props">
                <q-td :props="props">
                    <div>{{ props.row.logisticsCompany }}</div>
                </q-td>
            </template>
            <template v-slot:body-cell-time_info="props">
                <q-td :props="props">
                    <div>
                        <div>创建时间: {{ props.row.createTime }}</div>
                        <div v-show="props.row.paidTime">付款时间: {{ props.row.paidTime }}</div>
                        <div v-show="props.row.cashbackTime">返现时间: {{ props.row.cashbackTime }}</div>
                    </div>
                </q-td>
            </template>
            <template v-slot:body-cell-action="props">
                <q-td :props="props">
                    <q-btn color="primary" label="去发货" @click="showShippingModal(props.row.id)"></q-btn>
                </q-td>
            </template>
            <template v-slot:loading>
                <q-inner-loading showing color="primary"></q-inner-loading>
            </template>
        </q-table>
    </div>

    <!-- 物流详情模态框 -->
    <div id="logisticsModal" class="logistics-modal">
        <div class="logistics-modal-content">
            <span class="close" @click="closeLogisticsModal">&times;</span>
            <h2>物流详情</h2>
            <ul>
                <li v-for="item in expressDetails" :key="item.time">
                    <strong>{{ item.time }}</strong>: {{ item.status }}
                </li>
            </ul>
        </div>
    </div>

    <!-- 发货模态框 -->
<!--    <div id="shippingModal" class="shipping-modal">-->
<!--        <div class="shipping-modal-content">-->
<!--            <span class="close" @click="closeShippingModal">&times;</span>-->
<!--            <h2>发货</h2>-->
<!--            <form @submit.prevent="submitShipping">-->
<!--                <q-select outlined v-model="selectedLogisticsCompany" :options="logisticsCompanies" label="选择快递公司" option-value="dictItemCode" option-label="dictItemName" :dense="true"></q-select>-->
<!--                <q-input outlined v-model="expressNumber" label="快递单号" :dense="true"></q-input>-->
<!--                <q-btn type="submit" color="primary" label="提交"></q-btn>-->
<!--            </form>-->
<!--        </div>-->
<!--    </div>-->

    <!-- 发货模态框 -->
    <div id="shippingModal" class="shipping-modal">
        <div class="shipping-modal-content">
            <span class="close" @click="closeShippingModal">&times;</span>
            <div class="modal-title">发货</div>
            <form @submit.prevent="submitShipping">
                <q-select
                        outlined
                        v-model="selectedLogisticsCompany"
                        :options="logisticsCompanies"
                        label="选择快递公司"
                        option-value="dictItemCode"
                        option-label="dictItemName"
                        :dense="true"
                        class="q-mb-md"
                ></q-select>
                <q-input
                        outlined
                        v-model="expressNumber"
                        label="快递单号"
                        :dense="true"
                        class="q-mb-md"
                ></q-input>
                <q-btn
                        type="submit"
                        color="primary"
                        label="提交"
                        class="full-width"
                ></q-btn>
            </form>
        </div>
    </div>


</div>
<script src="/js/pay-order.js"></script>
</body>
</html>